<template>
	<view class="container">
		<!-- 套餐信息 -->
		<view class="package-info">
			<view class="info-row">
				<view class="label">套餐名称</view>
				<view class="value">
					<text v-if="isPackageLoading">加载中...</text>
					<text v-else>{{ packageName || '100游戏币' }}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="label">购买数量</view>
				<view class="quantity-control">
					<view class="btn minus" @click="decreaseQuantity" :class="{ disabled: quantity <= 1 }">
						<image src="/static/minus.png" mode="aspectFit" style="width: 25px; height: 25px;"></image>
					</view>
					<view class="quantity">{{ quantity }}</view>
					<view class="btn plus" @click="increaseQuantity">
						<image src="/static/plus.png" mode="aspectFit" style="width: 25px; height: 25px;"></image>
					</view>
				</view>
			</view>

			<view class="info-row total-amount">
				<view class="label">合计金额</view>
				<view class="amount">
					<text class="symbol">{{ displayTotal.symbol }}</text>
					<text class="number">{{ displayTotal.value }}</text>
				</view>
			</view>
		</view>

		<!-- 使用支付方式组件 -->
		<PaymentMethods ref="paymentMethodsComponent" :packageDetails="packageDetails" :autoLoad="true"
			@select-change="handlePaymentMethodChange" />

		<!-- 确定充值按钮 -->
		<view class="confirm-btn" @click="confirmRecharge">
			确定充值
		</view>
	</view>
</template>

<script>
	import PaymentMethods from '../../components/payment-methods/PaymentMethods.vue';

	export default {
		components: {
			PaymentMethods
		},
		data() {
			return {
				coinPackageNo: '',
				packageType: 0,
				// 购买数量
				quantity: 1,
				// 单价(元)
				price: 0,
				// 套餐名称
				packageName: '',
				// 套餐详情
				packageDetails: {},
				// 套餐详情加载状态
				isPackageLoading: true,
				// 组件相关状态
				// 当前选中的支付方式
				currentPaymentMethod: null,
				// 是否为兑换方式
				isCurrentMethodExchange: false,
				// 支付方式列表（仅用于存储，不直接管理）
				paymentMethods: []
			};
		},
		computed: {
			// 计算总金额
			totalAmount() {
				return this.quantity * this.price;
			},
			// 根据支付方式显示不同的合计格式
			displayTotal() {
				if (!this.currentPaymentMethod) {
					return {
						symbol: '¥',
						value: this.totalAmount.toFixed(2)
					};
				}

				const paymentMethodNo = this.currentPaymentMethod.paymentMethodNo;

				// 检查是否为兑换方式
				if (this.isCurrentMethodExchange && this.$refs.paymentMethodsComponent &&
					this.$refs.paymentMethodsComponent.exchangeConfig[paymentMethodNo] &&
					this.packageDetails[this.$refs.paymentMethodsComponent.exchangeConfig[paymentMethodNo].field]) {
					// 使用组件中的配置映射获取兑换信息
					const config = this.$refs.paymentMethodsComponent.exchangeConfig[paymentMethodNo];
					const exchangeQuantity = this.packageDetails[config.field] * this.quantity;
					return {
						symbol: '',
						value: `${exchangeQuantity}${config.unit}`
					};
				}

				// 普通支付方式显示金额
				return {
					symbol: '¥',
					value: this.totalAmount.toFixed(2)
				};
			}
		},
		onLoad(options) {
			// 接收从上一个页面传递过来的参数
			if (options && options.coinPackageNo) {
				this.coinPackageNo = decodeURIComponent(options.coinPackageNo);
			}
			if (options && options.packageType) {
				this.packageType = decodeURIComponent(options.packageType);
			}
			uni.setNavigationBarTitle({
				title: this.$t('rechargeDetail.str1')
			});

			// 请求套餐详情
			this.getPackageDetails();
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.rechargeOrder')
			});
		},
		methods: {
			// 获取套餐详情
			async getPackageDetails() {
				return; //todo 临时拦截
				try {
					this.isPackageLoading = true;
					const response = await this.$http.post('/coinPackage/getCoinPackageVO', {
						coinPackageNo: this.coinPackageNo
					});

					// 填充套餐信息
					this.packageDetails = response;
					this.packageName = response.packageName;
					this.price = response.salePrice;
				} catch (error) {
					console.error('获取套餐详情失败:', error);
					uni.showToast({
						title: '获取套餐详情失败',
						icon: 'none'
					});
				} finally {
					this.isPackageLoading = false;
				}
			},

			// 处理支付方式选择变化事件
			handlePaymentMethodChange(event) {
				this.currentPaymentMethod = event.method;
				this.isCurrentMethodExchange = event.isExchange;
			},

			// 减少数量
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			// 增加数量
			increaseQuantity() {
				this.quantity++;
			},
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},
			// 确定充值
			confirmRecharge() {
				if (!this.currentPaymentMethod) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					});
					return;
				}

				// 这里可以添加充值逻辑

				if (this.isCurrentMethodExchange) {
					//兑换方式

				} else {
					//支付渠道
				}
				const displayContent = this.isCurrentMethodExchange ?
					`${this.quantity}个${this.packageName}，合计${this.displayTotal.value}` :
					`充值${this.quantity}个${this.packageName}，合计¥${this.totalAmount.toFixed(2)}`;

				uni.showToast({
					title: `选择${this.currentPaymentMethod.methodName}，${displayContent}`,
					icon: 'none',
					duration: 3000
				});

				// 实际项目中，这里应该跳转到支付页面或调用支付接口
				const logData = {
					quantity: this.quantity,
					paymentMethod: this.currentPaymentMethod.methodName,
					paymentMethodNo: this.currentPaymentMethod.paymentMethodNo,
					channelCode: this.currentPaymentMethod.channelCode
				};

				// 对于兑换方式，添加兑换数量信息
				if (this.isCurrentMethodExchange) {
					logData.exchangeQuantity = this.displayTotal.value;
				} else {
					logData.totalAmount = this.totalAmount;
				}

				console.log('确认充值', logData);
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background-color: #f5f5f5;
	}

	/* 套餐信息样式 */
	.package-info {
		background-color: #fff;
		margin-top: 10px;
		padding: 0 16px;
	}

	.info-row {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eee;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 15px;
		color: #666;
		width: 100px;
	}

	.value {
		flex: 1;
		font-size: 15px;
		color: #333;
		text-align: right;
	}

	/* 数量控制样式 */
	.quantity-control {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.quantity-control .btn {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 5px;
	}

	.quantity-control .btn.disabled {
		opacity: 0.5;
	}

	.quantity-control .quantity {
		width: 40px;
		text-align: center;
		font-size: 15px;
		color: #333;
	}

	/* 总金额样式 */
	.total-amount .amount {
		flex: 1;
		text-align: right;
	}

	.total-amount .symbol {
		font-size: 15px;
		color: #f00;
	}

	.total-amount .number {
		font-size: 18px;
		font-weight: 500;
		color: #f00;
	}

	/* 支付方式样式 */
	.payment-methods {
		background-color: #fff;
		margin-top: 10px;
		padding: 16px;
	}

	.section-title {
		font-size: 14px;
		color: #999;
		margin-bottom: 10px;
	}

	.method-item {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eee;
		transition: background-color 0.2s;
		justify-content: space-between;
	}

	.method-item.selected {
		background-color: #f0f8ff;
	}

	.method-item.selected .method-name {
		color: #1677FF;
		font-weight: 500;
	}

	.method-item:last-child {
		border-bottom: none;
	}

	.method-icon {
		width: 30px;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-container {
		padding: 20px 0;
		display: flex;
		justify-content: center;
	}

	.method-name {
		flex: 1;
		font-size: 15px;
		color: #333;
	}

	.method-select {
		width: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	/* 确认按钮样式 */
	.confirm-btn {
		width: 90%;
		height: 45px;
		background-color: #f00;
		color: #fff;
		font-size: 17px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30px auto;
	}
</style>